<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="sysBusinessDetectionItemPack.editDetectionItems"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ sysBusinessDetectionItemPack.editDetectionItems }}</p>
    <div>
      <div style="width: 100%">
        <el-row>
          <el-col style="width: 20%">
            <el-input v-model="filterText" :placeholder="sysBusinessDetectionItemPack.treeNodeQuery"></el-input>
          </el-col>
          <el-col style="width: 80%">
            <el-input
              v-model="detectionItemName"
              :placeholder="sysBusinessDetectionItemPack.queryDetectionItems"
            ></el-input>
          </el-col>
        </el-row>
      </div>
      <div style="float: left; width: 20%">
        <el-scrollbar style="width: 95%; height: 400px" class="sampleScrollbar">
          <div class="material-search-tree">
            <el-tree
              ref="tree"
              node-key="id"
              :filter-node-method="filterNode"
              class="sampleTree"
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </el-scrollbar>
      </div>
      <div style="float: right; width: 80%">
        <div class="material-search-container">
          <div class="material-content">
            <span>{{ sysBusinessDetectionItemPack.noDataSelected }}</span>
            <el-table
              ref="chooseTableData"
              :data="tableData"
              border
              height="200"
              @selection-change="chooseSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="detectionItemName" :label="sysBusinessDetectionItemPack.itemsName" />
              <el-table-column prop="methodStandard" :label="sysBusinessDetectionItemPack.standardMethod" />
            </el-table>
          </div>
          <div class="material-content">
            <span>{{ sysBusinessDetectionItemPack.selectedData }}</span>
            <el-table
              ref="selectedTableData"
              :data="selectedTableData"
              border
              height="200"
            >
              <el-table-column prop="detectionItemName" :label="sysBusinessDetectionItemPack.itemsName" />
              <el-table-column prop="methodStandard" :label="sysBusinessDetectionItemPack.standardMethod" />
              <el-table-column prop="methodStandard" :label="opeateType.action">
                <template slot-scope="scope">r
                  <div class="base-table-operation">
                    <el-link
                      type="primary"
                      @click="deleteSelectedTableData(scope.$index)"
                      >{{ opeateType.delete }}</el-link
                    >
                  </div></template
                >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="base-dialog-footer">
      <el-button
        type="primary"
        :disabled="!submitLoad"
        @click="confirmDetectionItem()"
        >{{ opeateType.confirm }}</el-button
      >
      <el-button @click="handleClose">{{ opeateType.cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import _ from "lodash";
import {
  create,
  update,
  GetListNoPage,
} from "../../../api/DetectionItemManage/SysBusinessDetectionItemPackDetectionItem";
import { getSampleTree } from "../../../api/DetectionItemManage/SysBusinessSampleCategory";
import { GetSysBusinessDetectionItemsList } from "../../../api/DetectionItemManage/SysBusinessDetectionItem";
export default {
  name: "SysBusinessChoiceDetectionItemDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      submitLoad: true,
      updateState: false,
      filterText: "",
      detectionItemName: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "sampleCategoryName",
      },
      chooseTableData: [],
      tableDatas: [],
      packDetectionItem: [],
      selectedTableData: [], // 已选数据
    };
  },
  computed: {
    tableData() {
      return this.chooseTableData.filter((record) => {
        if (this.selectedTableData.some((item) => item.id === record.id)) {
          this.$nextTick(function() {
            this.$refs.chooseTableData.toggleRowSelection(record, true);
          });
        }
        // this.$nextTick(function () {
        //   this.$refs.chooseTableData.toggleRowSelection(record, record.state);
        // });
        return record.detectionItemName.includes(this.detectionItemName);
      });
    },
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessDetectionItemPack() {
      return this.$t("SysBusinessDetectionItemPack") || {};
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    getSampleTree(this.sampleFilterForm).then((res) => {
      this.treeData = res.data;
    });
    // 查询打包是否关联了检测项目
    var data = { detectionItemPackId: this.editId };
    GetListNoPage(data).then((res) => {
      this.selectedTableData = res.data;
      this.packDetectionItem = res.data;
    });
  },
  methods: {
    deleteSelectedTableData(index) {
      this.selectedTableData.splice(index, 1);
    },
    confirmDetectionItem: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        var sysBusinessSampleCategoryId =
          this.selectedTableData[0].sysBusinessSampleCategoryId;
        var data = [];
        for (let i = 0; i < this.selectedTableData.length; i++) {
          if (
            sysBusinessSampleCategoryId !==
            this.selectedTableData[i].sysBusinessSampleCategoryId
          ) {
            this.submitLoad = true;
            this.$message.warning(this.$t("SysBusinessDetectionItemPack.ItemUnderSameCategory"));
            return false;
          }
          data.push({
            detectionItemPackId: this.editId,
            SampleCategoryId:
              this.selectedTableData[i].sysBusinessSampleCategoryId,
            DetectionItemId: this.selectedTableData[i].id,
          });
        }
        if (
          this.packDetectionItem !== null &&
          this.packDetectionItem.length !== 0
        ) {
          update(data).then((res) => {
            if (res.code === 200) {
              this.handleClose();
            }
          });
        } else {
          create(data).then((res) => {
            if (res.code === 200) {
              this.handleClose();
            }
          });
        }
      }
    }, 2000),
    // 复选框
    chooseSelectionChange(val) {
      this.tableDatas = val;
      for (let i = 0; i < this.tableDatas.length; i++) {
        if (
          !this.selectedTableData.some(
            (item) => item.id === this.tableDatas[i].id
          )
        ) {
          this.selectedTableData.push(this.tableDatas[i]);
        }
      }
      // for (let i = 0; i < this.chooseTableData.length; i++) {
      //   //选中的state改为true
      //   if (
      //     this.tableDatas.some((item) => item.id == this.chooseTableData[i].id)
      //   ) {
      //     this.chooseTableData[i].state = true;
      //   }
      // }
    },
    // 点击节点触发事件
    handleNodeClick(data) {
      var datas = { sysBusinessSampleCategoryId: data.id };
      GetSysBusinessDetectionItemsList(datas).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].state = false;
        }
        this.chooseTableData = res.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleClose() {
      this.submitLoad = true;
      this.$emit("update:dialogVisible", false);
      this.$parent.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.sampleTree.el-tree {
  display: inline-block;
  min-width: 90%;
}
</style>
